<template>
	<view class="search">
		<image v-if="show=='0'" class="bacgroud" src="../../static/images/search.png" mode="widthFix"></image>
		<view class="searchinfo">
			<view class="s-i">
				<view class="input">
					<image class="search_box" src="../../static/images/search1/search.png"></image>
					<input type="text" class="i_box" placeholder-style="color:#999999;font-size:28rpx;" placeholder="请输入搜索关键词" v-model="searchText" @input="searchTextFn">
					<image class="cuo" src="../../static/images/search1/cha.png" mode="" v-if="searchText!=''" @click="clearFn"></image>
					<image class="tell-box" src="../../static/images/search1/tell.png" mode=""></image>
				</view>
				<view class="cancellation" @click="backFn">
					取消
				</view>
			</view>
			<view class="search-text" v-if="showText=='1'"   @click="searchFn(0)">
				<image class="search-text-img" src="../../static/images/search1/hot.png" mode=""></image>
				婚姻登记信息
			</view>
			<view class="search-text" v-if="showText=='2'" @click="searchFn(1)">
				<image class="search-text-img" src="../../static/images/search1/hot.png" mode=""></image>
				不动产登记信息
			</view>
		</view>
		<view class="servers" v-if="show=='1'">
			<image class="servers-img" src="../../static/images/search1/IMG_4891@3x.png" mode="widthFix"></image>
			<view class="servers-text" @click="marriageFn(0)">
				<text>婚姻登记信息</text>
				<image class="join-img" src="../../static/images/join.png" mode=""></image>
			</view>
		</view>
		<view class="servers" v-if="show=='2'">
			<image class="servers-img" src="../../static/images/search1/IMG_4891@3x.png" mode="widthFix"></image>
			<view class="servers-text" @click="marriageFn(1)">
				<text>不动产登记信息</text>
				<image class="join-img" src="../../static/images/join.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef } from 'vue'
	import Suggest from './component/suggest.vue'
	import { HISTORY } from '@/enums/constantEnums'
	import { getHotSearch } from '@/api/shop'
	import cache from '@/utils/cache'
	import { getArticleList } from '@/api/news'


	const searchText = ref('')
	const show = ref('0')
	const showText=ref('0')
	// 清空
	const backFn = () => {
		searchText.value = ''
		// uni.navigateBack(-1)
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
const clearFn=()=>{
	searchText.value=''
}
const searchTextFn=()=>{
	if(searchText.value.indexOf('婚姻')!==-1){
		showText.value='1'
	}else if(searchText.value.indexOf('不动产')!==-1){
		showText.value='2'
	}else{
		showText.value='0'
	}
	
}
// 婚姻
const marriageFn=(r:number)=>{
	if(r==0){
		uni.navigateTo({
			url:'/pages/search/search2/search2'
		})
	}else if(r==1){
		uni.navigateTo({
			url:'/pages/realestate/empower/empower'
		})
	}
}
const searchFn=(t:number)=>{
	
	if(t==0){
		show.value='1'
		searchText.value='婚姻登记信息'
		showText.value='0'
	}else if(t==1){
		show.value='2'
		searchText.value='不动产登记信息'
		showText.value='0'
	}
}


	interface Search {
		hot_search : {
			data : any[]
			status : number
		}
		his_search : string[]
		result : any
		searching : boolean
	}

	const search = reactive<Search>({
		hot_search: {
			data: [],
			status: 1
		},
		his_search: [],
		result: [],
		searching: false
	})
	const keyword = ref<string>('')
	const paging = shallowRef()

	const handleSearch = (value : string) => {
		keyword.value = value
		if (keyword.value) {
			if (!search.his_search.includes(keyword.value)) {
				search.his_search.unshift(keyword.value)
				cache.set(HISTORY, search.his_search)
			}
		}
		paging.value.reload()
		search.searching = true
	}

	const getHotSearchFunc = async () => {
		try {
			search.hot_search = await getHotSearch()
		} catch (e) {
			//TODO handle the exception
			console.log('获取热门搜索失败=>', e)
		}
	}

	const handleClear = async () : Promise<void> => {
		const resModel : any = await uni.showModal({
			title: '温馨提示',
			content: '是否清空历史记录？'
		})
		if (resModel.confirm) {
			cache.set(HISTORY, '')
			search.his_search = []
		}
	}

	const queryList = async (page_no : number, page_size : number) => {
		try {
			const { lists } = await getArticleList({
				keyword: keyword.value,
				page_no,
				page_size
			})
			paging.value.complete(lists)
		} catch (e) {
			console.log('报错=>', e)
			//TODO handle the exception
			paging.value.complete(false)
		}
	}


	getHotSearchFunc()
	search.his_search = cache.get(HISTORY) || []
</script>

<style lang="scss" scoped>
	.search {
		width: 100%;
		position: relative;

		.bacgroud {
			width: 100%;
		}
		.servers{
			position: absolute;
			top: 180rpx;
			width: 100%;
			
			.servers-img{
				width: 100%;
				z-index: 1;
			}
			.servers-text{
				width: 92%;
				margin-left: 4%;
				background-color: #fff;
				height: 92rpx;
				margin-top: 24rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				line-height: 92rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #4678F0;
				padding: 0 24rpx;
				.join-img{
					width: 40rpx;
					height:40rpx;
					float: right;
					margin-top: 22rpx;
				}
			}
		}

		.searchinfo {
			width: 90%;
			margin-left: 5%;
			position: absolute;
			top: 90rpx;

			.s-i {
				display: flex;
				justify-content: space-between;

				.input {
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 1;
					border: 2rpx solid #4678F0;
					display: flex;
					width: 80%;

					.search_box {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						padding-top: 10rpx;
						padding-left: 20rpx;
						padding-right: 10rpx;
					}

					.i_box {
						width: 80%;
						height: 58rpx;
						
						
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #2A3543;
					}
					.cuo{
						width: 43rpx;
						height: 40rpx;
						padding-right: 18rpx;
						padding-top: 10rpx;
					}
					.tell-box {
						width: 40rpx;
						height: 40rpx;
						padding-right: 20rpx;
						padding-top: 10rpx;
					}
				}

				.cancellation {
					width: 20%;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #4678F0;
					text-align: right;
					padding-top: 10rpx;

				}
			}
			
			.search-text{
				// position: absolute;
				position: relative;
				z-index: 5;
				background-color: #fff;
				width: 490rpx;
				height: 86rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				line-height: 86rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FF0000;
				box-shadow: 5rpx 5rpx 10rpx #e2e4e8;
				
				.search-text-img{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					padding-right: 25rpx;
					// padding-top: 20rpx;
					// margin-top: 20rpx;
				}
			}
		}
	}

	// .s_i{
	// 	// width: 100%;
	// 	// height: 200rpx;
	// 	// background-color: red;
	// 	position: absolute;
	// 	top: 98rpx;
	// }
	// .input{
	// 	width: 95%;
	// 	margin-left: 2.5%;
	// }
	// .search_box{
	// 	width: 80%;
	// }
	// .i_box{
	// 	width: calc( 80% - 60rpx);
	// 	height: 60rpx;
	// 	line-height: 60rpx;
	// 	border: 1px solid #4678F0;
	// 	border-radius: 50rpx;
	// 	padding-left: 60rpx;
	// }
</style>